<template>
    <div>
        <Row>
            <Col span="24">
                <Card :padding="0" style="border:1px solid #e9eaec">
                    <p slot="title">
                        租客详情
                        <Button class="btn-in-top-large" v-pmis="30" type="primary" @click="isCheckInVisible = true">新增入住</Button>
                        <Button class="btn-in-top-large" v-pmis="30" type="primary" @click="delRenter" style="right:86px;border-radius: 0;">删除租客</Button>
                    </p>

                    <div class="renter-detail">
                        <div>
                            <p v-for="(key, index) in showRenterDetail.key" :key="index" v-if="renter[key]">{{showRenterDetail.name[index]}} : {{index === 0 ? ((renter['tenant_tag'] ? `[${renter['tenant_tag'].name}] ` : '') + renter[key]) : renter[key]}}</p>
                        </div>

                        <Button type="ghost" size="default" @click="changeRenter">修改</Button>
                    </div>
                </Card>

                <renterRoom 
                @refresh="refreshRenterInfo"
                @openNewTab="openNewTab"
                @openGrantRecord="openGrantRecord"
                v-if="item.handle"
                v-for="item in renter.lease_list" 
                :key="item.id"
                :renterId="renterId"
                :lease="item"></renterRoom>

                <div v-for="item in renter.lease_list"  v-if="!item.handle" class="no-permission">抱歉，您无该房源管理权限</div>

            </Col>
        </Row>

        <renterCheckIn 
        :renterId="renterId" 
        @cancelCheckIn="cancelCheckIn"
        @checkInSuccess="checkInSuccess"
        v-if="isCheckInVisible"/>

        <!-- 添加租客 -->
        <addRenter :isShow.sync="isShowAddRenter" v-model="renterData" @refresh="getRenterInfo"/>
    </div>
</template>

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
import renterRoom from './renterRoom.vue'
import renterCheckIn from './renterCheckIn.vue'
import addRenter from './add-renter.vue'
export default {
  name: 'renterDetail',
  props: {
    renterId: {
      required: true
    }
  },
  components: {
    renterRoom,
    renterCheckIn,
    addRenter
  },
  data () {
    return {
      showRenterDetail: {
        key: ['name', 'id_card', 'phone'],
        name: ['姓名', '身份证号', '电话号码']
      },
      renter: {},
      isCheckInVisible: false,
      isShowAddRenter: false // 是否展示添加租客弹窗
    }
  },
  created () {
    this.getRenterInfo()
  },

  computed: {
    refresh_vaule () {
      return this.$store.state.renter.refresh_vaule
    },

    renterData () {
      const { name, id_card, phone, tenant_tag_id, face_file_id, id } = this.renter

      return { name, id_card, phone, tenant_tag_id, face_file_id, id }
    }
  },

  watch: {
    /**
         *
         *  当删除同租人的时候其他租客列表相应进行刷新
         */
    refresh_vaule (newVal) {
      this.getRenterInfo()
    },

    renterData (value) {
      console.log('value', value)
    }
  },

  methods: {
    /**
        * 修改租客
        */
    changeRenter () {
      this.isShowAddRenter = true
    },
    /**
         * 打开门锁授权记录
         * @param {String} leaseId 租约id
         * @param {String} roomName 房间名
         */
    openGrantRecord (leaseId, roomName, tenantId, roomDeviceIsExistList) {
      this.$emit('openGrantRecord', leaseId, roomName, tenantId, roomDeviceIsExistList)
    },

    /**
         * 传递参数打开新的参数详情页
         * @param {String} id
         * @param {String} name
         */
    openNewTab (id, name) {
      this.$emit('openNewTab', id, name)
    },

    getRenterInfo () {
      http.request(this, api.tenant_info, [this.renterId], null, res => {
        if (res) {
          // 获取到租客信息
          this.renter = res
        }
      })
    },
    setEditMode (form, status) {
      this.renterFormEditMode = !status
      this.getRenterInfo()
    },
    saveRenter (form) {
      let params = {
        name: this.renter.name,
        id_card: this.renter.id_card
        // phone: this.renter.phone
      }
      if (!params.name.trim()) {
        this.$Message.error('租客姓名不能为空!')
        return
      }

      const idCardReg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
      if (params.id_card && !idCardReg.test(params.id_card)) {
        this.$Message.error('身份证号码格式错误!')
        return
      }

      if (!params.id_card) {
        delete params.id_card
      }

      http.request(this, api.tenant_update, [this.renterId], params, res => {
        if (res) {
          // 修改成功
          this.getRenterInfo()
          this.$emit('updateTab', this.renterId, params.name) // 更改标签名
          this.renterFormEditMode = true
          this.$Message.success('修改成功!')
        }
      })
    },
    cancelCheckIn () {
      // 关闭入住弹窗
      this.isCheckInVisible = false
    },

    checkInSuccess () {
      // 关闭入住弹窗
      this.isCheckInVisible = false
      this.getRenterInfo()
    },
    frozen () {},
    delConfirm () {
      http.request(this, api.tenant_del, [this.renterId], null, res => {
        if (res) {
          // 删除成功后关闭当前tab
          this.$emit('delTab', this.renterId, true)
        }
      })
    },
    delRenter () {
      if (this.renter.lease_list && this.renter.lease_list.length) {
        this.$Modal.error({
          title: '不可删除',
          content: '当前仍有房间尚未退租,不可删除。'
        })
      } else if (this.renter.lease_list) {
        this.$Modal.confirm({
          title: '删除租客',
          content: '确定要删除该租客吗?',
          okText: '确定删除',
          onOk: this.delConfirm
        })
      } else {
        this.$Modal.error({
          title: '网络错误',
          content: '获取租客信息失败,请刷新重试。'
        })
      }
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    refreshRenterInfo () {
      this.getRenterInfo()
      this.$emit('refreshRenterList')
    }
  }
}
</script>

<style lang="less" scoped>
.ivu-card-head p {
    height: auto;
}

.ivu-card-head {
    padding-top: 8px;
    padding-bottom: 6px;
}

.ivu-card-body {
    padding: 0;
}

.renter-form {
    margin-top: -15px;
    padding: 26px 16px 2px 16px;
    // border: 1px solid #e9eaec;
}

.op-wrap {
    display: inline;
}
.hide {
    display: none;
}

.no-permission {
    height: 160px;
    line-height: 160px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: #efeff1;
    margin-top: 15px;
}

.renter-detail {
    padding: 30px 10px;
    display: flex;
    justify-content: space-between;

    >div {
        display: flex;

        p {
            margin-right: 20px;
        }
    }
}
</style>
